<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2025/3/19
  Time: 15:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>日记详情 - ${diary.title}</title>
    <style>
        /* 优化样式 */
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background: #f5f5f5;
        }

        .diary-container {
            background: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .diary-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 1.5rem;
        }

        .diary-title {
            font-size: 28px;
            color: #333;
            margin-bottom: 0.5rem;
        }

        .diary-meta {
            color: #666;
            font-size: 14px;
            line-height: 1.5;
        }

        .diary-content {
            line-height: 1.6;
            white-space: pre-wrap;
            margin: 2rem 0;
            padding: 1.5rem;
            background: #f8f9fa;
            border-radius: 4px;
            border: 1px solid #eee;
        }

        .action-buttons {
            text-align: right;
            margin-top: 2rem;
        }

        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: opacity 0.2s;
        }

        .btn:hover {
            opacity: 0.8;
        }

        .btn-edit {
            background: #007bff;
            color: white;
        }

        .btn-delete {
            background: #dc3545;
            color: white;
            margin-left: 10px;
        }
    </style>
</head>
<body>
<div class="diary-container">
    <!-- 头部：标题与元信息 -->
    <div class="diary-header">
        <div>
            <h1 class="diary-title">${diary.title}</h1>
            <div class="diary-meta">
                <p>创建时间：<fmt:formatDate value="${diary.createTime}" pattern="yyyy-MM-dd HH:mm"/></p>
                <p>最后修改时间：<fmt:formatDate value="${diary.lastModifiedTime}" pattern="yyyy-MM-dd HH:mm"/></p>
            </div>
        </div>
        <div class="action-buttons">
            <!-- 返回列表 -->
            <a href="${pageContext.request.contextPath}/home.jsp" class="btn">返回列表</a>
        </div>
    </div>

    <!-- 日记内容 -->
    <pre class="diary-content">${diary.content}</pre>

    <!-- 操作按钮组 -->
    <div class="action-buttons">
        <!-- 编辑按钮 -->
        <form action="${pageContext.request.contextPath}/diary"
              method="get"
              style="display: inline-block">
            <input type="hidden" name="action" value="edit">
            <input type="hidden" name="id" value="${diary.id}">
            <button type="submit" class="btn btn-edit">编辑日记</button>
        </form>

        <!-- 删除按钮 -->
        <form action="${pageContext.request.contextPath}/diary"
              method="post"
              onsubmit="return confirm('确定要删除这篇日记吗？操作不可恢复！')"
              style="display: inline-block">
            <input type="hidden" name="action" value="delete">
            <input type="hidden" name="id" value="${diary.id}">
            <button type="submit" class="btn btn-delete">删除日记</button>
        </form>
    </div>
</div>

<!-- 错误提示 -->
<c:if test="${not empty error}">
    <div style="color: red; margin-top: 1rem; text-align: center">错误：${error}</div>
</c:if>

<script>
    // 增强删除确认提示
    document.querySelectorAll('form[action*="delete"]').forEach(form => {
        form.onsubmit = () => {
            return confirm('⚠️ 此操作将永久删除日记！\n\n确认删除吗？');
        };
    });
</script>
</body>
</html>